<template>
    <L7MapWithGaode :mapOnloadCB="mapOnloadCB"></L7MapWithGaode>
</template>

<script lang="ts">
import {Scene, PolygonLayer, PointLayer, LineLayer} from '@antv/l7';
import {defineComponent, onMounted, ref} from "vue"
import L7MapWithGaode from "@/component/common/L7MapWithGaode.component.vue"

export default defineComponent({
    name: "L7.addScatter5",
    components: {L7MapWithGaode},
    setup() {

        const mapOnloadCB = (scene: Scene) => {
            scene.setZoomAndCenter(2.5, [112, 23.69])

            fetch(`${window.location.origin}/antv-test/data/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv`)
                .then(res => res.text())
                .then(data => {
                    const pointLayer = new PointLayer({})
                        .source(data, {
                            parser: {
                                type: 'csv',
                                x: 'Longitude',
                                y: 'Latitude'
                            }
                        })
                        .shape('circle')
                        .active(true)
                        .animate(true)
                        .size(40)
                        .color('#ffa842')
                        .style({
                            opacity: 1,
                            offsets: [40, 40]
                        });
                    const pointLayer2 = new PointLayer({})
                        .source(data, {
                            parser: {
                                type: 'csv',
                                x: 'Longitude',
                                y: 'Latitude'
                            }
                        })
                        .shape('circle')
                        .active(true)
                        .animate(true)
                        .size(50)
                        .color('#f00')
                        .style({
                            opacity: 1
                        });

                    scene.addLayer(pointLayer);
                    scene.addLayer(pointLayer2);
                })
        }

        return {
            mapOnloadCB
        }
    }
})
</script>

<style scoped>

</style>
